<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <#include "/resource.ftl"/>
    <style>
        .line{
            display: flex;
        }
        .line .item{
            text-align: center;
            margin-right: 28px;
        }
        .line .item i{
            font-size: 48px;
        }
    </style>
</head>
<body class="hold-transition skin-purple-light sidebar-mini">
<div class="wrapper">
<#assign selectindex=4 />
<#assign selectchild=1 />
<#include "mainheader.ftl"/>
    <!-- Left side column. contains the logo and sidebar -->

<#include "mainsidebar.ftl"/>

    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <h1>
                Athena消息系统
            </h1>
            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> 主页</a></li>
                <li class="active">概览</li>
            </ol>
        </section>

        <!-- Main content -->
        <section id="migrate" class="content">
            <div style="background-color: #ffffff;border-radius: 8px;">
                <div style="font-size: 24px;font-weight: bold;color: #504e6b;padding: 10px;display: flex;align-items: center;">
                    <div>消息服务器</div>
                    &nbsp;
                </div>
                <hr style="margin: 0;">
                <div style="padding: 10px;">
                <#list addresses as address>
                    <div style="<#if address_index gt 0>border-top:1px solid #e7e7e7;</#if>padding:12px 8px;" class="address">
                        <span class="ad">${address.address}</span>
                        <span class="badge bg-green">在线人数：${address.count}</span>
                        <span class="badge bg-green " onclick="source(${address_index})" v-if="!migrate">迁移</span>
                        <span  class="badge bg-green " v-if="migrate && sourceIndex != ${address_index}" onclick="destination(${address_index})" data-toggle="modal"
                               data-target=".editor_modal"><i class="fa fa-rocket"></i></span>
                        <span  class="badge bg-green " v-if="migrate && sourceIndex == ${address_index}" onclick="cancel(${address_index})">取消</span>
                    </div>
                </#list>
                </div>
            </div>

            <div class="modal fade editor_modal" tabindex="-1" role="dialog" >
                <div class="modal-dialog modal-lg" role="document" id="editor">
                    <form class="modal-content" id="migrate-form" @submit.prevent="onSubmit" action="/message/migrate">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">×</span></button>
                            <h4 class="modal-title">正在迁移用户至【{{destination}}】</h4>
                        </div>
                        <div class="modal-body">
                            <div class="input-group">
                                <span class="input-group-addon">模式　　</span>
                                <select class="form-control" name="type" v-model="type" >
                                    <option value="1" :selected="type==1?true:false">整体迁移</option>
                                    <option value="2" :selected="type==2?true:false">部分迁移</option>
                                    <option value="3" :selected="type==3?true:false">单用户迁移</option>
                                </select>
                            </div>
                            <br>
                            <div class="input-group" v-if="type==2">
                                <span class="input-group-addon">迁移数量</span>
                                <input class="form-control" name="num" v-model="num" type="text">
                            </div>
                            <div class="input-group" v-if="type==3">
                                <span class="input-group-addon">用户令牌</span>
                                <input class="form-control" name="token" v-model="token" type="text">
                            </div>
                            <input type="hidden" v-model="source" name="source">
                            <input type="hidden" v-model="destination" name="destination">

                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="btn btn-primary  btn-block">提交</button>
                        </div>
                    </form>
                </div>
            </div>
        </section>
        <!-- /.content -->
    </div>

    <!-- /.content-wrapper -->
<#include "mainfooter.ftl"/>
</div>
<script>
    function onSubmit() {
        $('#migrate-form').ajaxSubmit(function (result) {
            console.log(result);
            if(result == 'true'){
                window.location.reload(true);
            }
        });
        return false;
    }
    function source(addressIndex) {
        vm.sourceIndex = addressIndex;
        vm.migrate = true;
        vm.source = $('.address .ad').eq(addressIndex).text();
    }
    function destination(addressIndex) {
        vm.destinationIndex = addressIndex;
        vm.destination = $('.address .ad').eq(addressIndex).text();
    }

    function cancel() {
        vm.sourceIndex = -1;
        vm.destinationIndex = -1;
        vm.migrate = false;
    }

    var vm = new Vue({
        el: '#migrate',
        data: {
            token:'',
            num:0,
            type:1,
            migrate:false,
            sourceIndex:-1,
            destinationIndex:-1,
            source:-1,
            destination:-1
        }
    });
</script>
<script src="/js/app.js"></script>
</body>
</html>
